<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2024-01-09 14:14:47
 * @LastEditors: ChengNan 1429323234@qq.com
 * @LastEditTime: 2024-08-13 10:50:02
 * @FilePath: /src/views/HomeView.vue
 * @Description: 
-->
<template>
  <div class="home">
    <router-link v-for="(item, index) in list" :key="index" class="router" tag="h3" :to="item.to">
      {{ item.name }}
    </router-link>
    
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'HomeView',
  data() {
    return {
      list: [
        { name: '1. table跨页选中', to: '/tableSelect' },
        { name: '2. keepAlive', to: '/keepAlive' },
        { name: '3. $set', to: '/$set' },
        { name: '4. 数字滚动动画（0-9）', to: '/numberAnimation' },
        { name: '5. svg转PDf', to: '/svg2img' },
        { name: '7. 路由跳转', to: '/routerDO' },
        { name: '8. displayFlex', to: '/displayFlex' },
        { name: '9. comRender组件', to: '/comRender' },
        { name: '10. virtualSelect组件', to: '/virtualSelect' },
        { name: '11. drawChart组件', to: '/drawChart' },
      ]
    }
  },
}
</script>
<style lang="scss">
.home {
  width: 300px;
  height: 500px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  box-shadow: inset 0 0 10px #f0f0f0;
  margin: auto;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: scroll;
}
.router {
  cursor: pointer;
  padding: 2px 6px;
  width: 100%;
  text-align: left;
}
.router:hover {
  background-color: #f0f0f0;
}
</style>